import React, {useEffect, useState} from "react";
import './my_record.scss'
import {Steps} from "antd";
import {getUserRecordTask} from "../../api/recordTaskApi";

function MyRecord(){
    const {Step} = Steps

    // 数据
    const [data_list, setData_list] = useState([])

    // 每一个状态的备案数量
    const [status_list, set_status_list] = useState([0, 0, 0, 0, 0])

    // 获取数据
    const getData = () => {
        getUserRecordTask(13)
            .then(res => {
                setData_list(res)
                // 要在获取到数据之后再统计状态
                setStatus(res)
            })
    }

    // 加载数据
    useEffect(() => {
        getData()
    }, []);

    // 读取数据列表中的状态
    const setStatus = (data) => {
        let status_list = [0,0,0,0,0]
        for (let i = 0; i < data.length; i++){
            status_list[data[i].status]++
        }
        set_status_list(status_list)
    }


    return(
        <div className={'component_container'}>
            <div className={'my-record-title'}>
                <div className={'my-record-title-my'}>我的备案</div>
                <div className={'my-record-title-more'}>查看更多>></div>
            </div>

            <div className={'my-record-panel'}>
                <div className={'my-record-panel-item'}>
                    <div className={'my-record-panel-item-title'}>暂存</div>
                    <div className={'my-record-panel-item-data'}>{status_list[0]}个</div>
                </div>

                <div className={'my-record-panel-item'}>
                    <div className={'my-record-panel-item-title'}>审核中</div>
                    <div className={'my-record-panel-item-data'}>{status_list[1]}个</div>
                </div>

                <div className={'my-record-panel-item'}>
                    <div className={'my-record-panel-item-title'}>已退回</div>
                    <div className={'my-record-panel-item-data'}>{status_list[2]}个</div>
                </div>

                <div className={'my-record-panel-item'}>
                    <div className={'my-record-panel-item-title'}>已完成</div>
                    <div className={'my-record-panel-item-data'}>{status_list[3]}个</div>
                </div>

                <div className={'my-record-panel-item'} style={{borderRight:0}}>
                    <div className={'my-record-panel-item-title'}>已作废</div>
                    <div className={'my-record-panel-item-data'}>{status_list[4]}个</div>
                </div>
            </div>


            {data_list.map((value, index) => {
                return(
                    <div className={'my-record-state'} key={index}>
                        <div style={{fontSize:18, marginBottom:30}}>
                            新增备案{value.sno}变更情况
                        </div>

                        <div>
                            <Steps current={value.stage}>
                                <Step title="在线备案"/>
                                <Step title="资料初审"/>
                                <Step title="现场勘查"/>
                                <Step title="备案复审"/>
                            </Steps>
                        </div>
                    </div>
                )
            })}

        </div>

    )
}

export default MyRecord